<template>
  <div>
    <ArticleChannel v-model="showChannel" :myChannels='myChannels' :active='active' @indexOperation='indexOper'></ArticleChannel>
    <van-tabs v-model="active" animated>
      <van-tab :title="item.name" v-for="item in myChannels" :key="item.id">
        <article-list :channelId="item.id"></article-list>
      </van-tab>
    </van-tabs>
    <!-- 按钮 -->
    <div class="btn-wrapper">
      <van-icon name="search" />
      <van-icon name="ellipsis" @click="showChannel = true" />
    </div>
  </div>
</template>

<script>
import { getMyChannels } from '@/api/article.js'
import ArticleChannel from '@/components/ArticleChannel.vue'
import ArticleList from '@/components/ArticleList.vue'
export default {
  components: { ArticleChannel, ArticleList },
  name: 'HomeFirst',
  data () {
    return {
      active: 0,
      showChannel: false,
      myChannels: []
    }
  },
  async created () {
    // 不使用err不写err即可，但是,号需要写
    const res = await getMyChannels()
    // console.log(res.data.channels)
    this.myChannels = res.data.channels
    // console.log(this.myChannels)
  },
  methods: {
    indexOper (index) {
      // 关闭频道模块
      this.showChannel = false
      // 将active设为频道模块点击的索引实现相应的转换
      this.active = index
    }
  }
}
</script>

<style lang='less' scoped>
::v-deep .van-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  .van-tabs__line {
    height: 2px;
    width: 32px;
  }
  .van-tab {
    color: #9ea1ae;
  }
  .van-tab--active {
    font-size: 18px;
    color: #333;
  }
  .van-tabs__wrap {
    padding-right: 86px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .van-tabs__content {
    flex: 1;
    overflow: hidden;
  }
  .van-tab__pane {
    height: 100%;
  }
}
.btn-wrapper {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  height: 44px;
  background: #fff;
  display: flex;
  align-items: center;
  .van-icon {
    flex: 1;
    text-align: center;
    font-size: 24px;
  }
  &::before {
    content: "";
    width: 20px;
    height: 44px;
    position: absolute;
    left: -20px;
    top: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
  }
}
</style>
